<template lang="pug">
  .effect-container
    ul.effects-list
      EffectItem(
      :id='effect.id',
      :effect='effect',
      :delay='config.delay',
      @end='handleAnimationEnd',
      v-for='(effect, index) in effects',
      :key='index')

</template>


<script>
import EffectItem from './effect-item'

export default {
    name: 'effect',
    components: {
      EffectItem
    },
    props: {
      effect: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        effectMap: [],
        effectText: '',
        effectVisible: false,
        config: {
          delay: 60,
          moveDelay: 3
        },
        effects: [],
        moveTimer: null,
        effectLimit: 0
      }
    },
    mounted() {
      setTimeout(() => {
        this.effectMap = this.$CONFIG.animateMap[this.effect]
        this.formatEffectData()
      }, 3 * 1000)
    },
    beforeDestroy() {
      if (this.moveTimer) {
        clearTimeout(this.moveTimer)
      }
      this.clearEffects()
    },
    computed: {
      getEffectData() {
        return this.effectMap
      },
      getEffectStaus() {
        return this.effectVisible
      }
    },
    methods: {
      showEffect() {
        this.effectVisible = true
      },
      // 时间转换
      transferDate(timestamp) {
        return new Date(timestamp).toLocaleString()
      },
      // 计算随机数
      randomPer(pre = 3) {
        const rnd = seed => {
            seed = (seed * 9301 + 49297) % 233280
            return seed / (233280.0)
        }
        const rand = number => {
            const seed = new Date().getTime()
            return rnd(seed) * number + Math.random()
        }
        return rand(pre)
      },
      // 清空动画队列
      clearEffects() {
        this.effects = []
      },
      handleAnimationEnd(id) {
        this.formatEffectData()
        // const targetIndex = this.effects.findIndex(effect => effect.id === id)
        // if (targetIndex > -1) {
        //   this.effects.splice(targetIndex, 1)
        // }
        // if(this.effects.length < 3) {
        //   this.formatEffectData()
        // }
      },
      queueEffect(effects) {
        if(!effects.length) return
        // effects.forEach((b, i) => {
        //   b.id = i + 1
        // })
        // 生成随机的时间，push 进不同的内容，而不是一次性赋值
        const moveEffects = () => {
          if (effects.length) {
            this.effects.push(effects[0])
            effects.splice(0, 1)
            if (effects.length) {
              this.moveTimer = setTimeout(moveEffects, parseInt(this.randomPer(this.config.moveDelay), 0) * 1000)
            }
          }
        }
        moveEffects()
        this.effectLimit = effects.length + 2
      },
      formatEffectData(data) {
        let list = []
        this.effects = []
        this.effectMap.forEach(item => {
          list.push(item)
        })
        this.queueEffect(list)
      }
    }
  }
</script>

<style lang="stylus">
.effect-container
  position: absolute
  width: 100%
  top: 0
  bottom: 0

 .size-0
    font-size: 1.5rem
    font-weight: bold

  .size-1
    font-size: 1.2rem

  .size-2
    font-size: 1rem

  // 字体颜色
  .color-0
    color: chartreuse

  .color-1
    color: green

  .color-2
    color: red

  .color-3
    color: darkviolet

  .color-4
    color: pink

  .color-5
    color: yellow

  .color-6
    color: white

  .color-7
    color: black

@keyframes effect-in {
  0%  { transform: translate3d(0, -100%, 0) }
  25%, 50%, 75%, 100% { transform: translate3d(0, 0, 0) }
  37%  { transform: translate3d(0, -24%, 0) }
  62% { transform: translate3d(0, -12%, 0) }
  88% { transform: translate3d(0, -5%, 0) }
}

@keyframes effect-out {
  0%  { transform: translate3d(0, 0, 0) }
  100%  { transform: translate3d(0, -100%, 0) }
}

@keyframes input-box-in {
  0%  { transform: translate3d(0, -2000%, 0) }
  65%  { transform: translate3d(0, 100%, 0) }
  80%  { transform: translate3d(0, -80%, 0) }
  100%  { transform: translate3d(0, 0, 0) }
}

@keyframes inputColor {
  0%  { color: chartreuse }
  12% { color: green }
  24% { color: red }
  36% { color: darkviolet }
  60% { color: pink }
  72% { color: yellow }
  86% { color: white }
  100% { color: black }
}
</style>
